<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Itim&display=swap&text=homeblgwrkaut" rel="stylesheet">
  <style>
    html,
    body {
      height: 100%;
      overflow: hidden;
    }

    :root {
      font-size: 2vw;
      font-family: Itim, sans-serif;
    }

    body {
      display: grid;
      place-content: center;
      background-color: #025;
    }

    nav {
      position: relative;
      color: #aef;
    }

    ul {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      padding: 0;
      margin: 0;
      list-style-type: none;
    }

    li {
      padding: 0 1.25rem;
    }

    svg {
      color: #ff2;
      overflow: visible;
    }

    path {
      --factor: 1;
      transition: all calc(0.4s * var(--factor)) ease-in-out;
    }

    a {
      display: block;
      width: 100%;
      text-align: center;
      text-decoration: none;
      text-transform: lowercase;
      letter-spacing: 0.05em;
      font-size: 2.75rem;
      line-height: 1.25;
      color: inherit;
      transition: color 0.3s ease-in-out;
    }

    a.active {
      color: #ff2;
    }
  </style>

</head>

<body>
  <nav>
    <ul>
      <li>
        <a class="active" href="#home">主页</a>
      </li>
      <li>
        <a href="#home">博客</a>
      </li>
      <li>
        <a href="#home">工作</a>
      </li>
      <li>
        <a href="#home">关于</a>
      </li>
    </ul>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 977.2 18.2">
      <path class="squiggle" fill="none" stroke="currentColor" stroke-dashoffset="1" stroke-miterlimit="10"
        stroke-linecap="round" stroke-width="4"
        d="M.8 5.6a13.6 13.6 0 0 1 20.3 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.4 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.4 0l6.1 7a13.6 13.6 0 0 0 20.4 0l6.2-7a13.6 13.6 0 0 1 20.3 0l6.2 7a13.6 13.6 0 0 0 20.4 0l6.1-7a13.6 13.6 0 0 1 20.4 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.4 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.3 0l6.2 7a13.6 13.6 0 0 0 20.4 0l6.2-7a13.6 13.6 0 0 1 20.3 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.4 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.4 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.3 0l6.2 7a13.6 13.6 0 0 0 20.4 0l6.2-7a13.6 13.6 0 0 1 20.3 0l6.2 7a13.6 13.6 0 0 0 20.4 0l6.2-7a13.6 13.6 0 0 1 20.3 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.4 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.4 0l6.1 7a13.6 13.6 0 0 0 20.4 0l6.2-7a13.6 13.6 0 0 1 20.3 0l6.2 7a13.6 13.6 0 0 0 20.4 0l6.2-7a13.6 13.6 0 0 1 20.3 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.4 0l6.2 7a13.6 13.6 0 0 0 20.3 0l6.2-7a13.6 13.6 0 0 1 20.4 0" />
    </svg>
  </nav>
</body>
<script>
  let oldIndex = 0;
  updateDash(0);

  function updateDash(index) {
    const squiggle = document.querySelector(".squiggle");
    const pathLength = squiggle.getTotalLength();
    const start = pathLength * 0.25 * index;
    const end = pathLength * 0.25 * (index + 1);
    squiggle.style.setProperty("--factor", Math.abs(oldIndex - index));
    oldIndex = index;
    squiggle.setAttribute(
      "stroke-dasharray",
      `1, ${start}, ${end - start}, ${pathLength}`
    );
  }

  const links = document.querySelectorAll("a");
  links.forEach((link, i) => {
    link.addEventListener("click", () => {
      links.forEach((l) => l.classList.remove("active"));
      link.classList.add("active");
      updateDash(i);
    });
  });
</script>

</html>